import Taro, { Component} from '@tarojs/taro'
import { View, Text, Image,Picker  } from '@tarojs/components'
import {AtButton,AtTag,AtSearchBar,AtIcon,AtDrawer} from 'taro-ui'
import './patientlist.css'
import app from '../../../../main.js'


export default class Patientlist extends Component {
    config = {
        navigationBarTitleText: '随访患者列表'
    }

    constructor(){
        super(...arguments);
        this.state={
            // 分段
            // current:3,
            buttonClass1:{current:3,selected:false,dispaly:'buttonNone'},
            buttonClass2:{current:3,selected:false,dispaly:'buttonNone'},
            // 搜素框
            value:'',
            // 患者信息
            patientInfo:[],
            // 患者数量
            patientCount:0,
            // 医生所管理的表签
            labels:[],
            drawerOpen:false,
            // 选择器
            region:[],
            pickerColock:false,
            // 省市参数
            province:'',
            city:'',
            label:'',
        }
    }

    // 搜索
    onChange(value){
        this.setState({
            value
        })
    }
    onActionClick(value){
        this.setState({
            patientInfo:[],
            label:'',
            province:'',
            city:'',
        },()=>{
            this.offset=0
            this.total=0
            this.onIcomClick()
        })
    }
    onClear(){
        let me = this
        me.setState({
            value:'',
            patientInfo:[]
        },()=>{
            me.offset=0
            me.total=0
            me.getData()
        })
    }
    // 分短器
    buttonClick(index){
        let buttonClass = {current:3,selected:false,dispaly:'buttonNone'}
        switch(index){
            case 0 :
            let bol = !this.state.buttonClass1.selected
            if(bol){
                this.setState({
                    buttonClass2:buttonClass,
                    buttonClass1:{current:index,selected:true,dispaly:'buttonShow'} 
                })
            }else{
                this.setState({
                    pickerColock:false
                })
                this.onIcomClick()
            }
            break;
            case 1 :
            let bol2 = !this.state.buttonClass2.selected
            if(bol2){
                this.setState({
                    buttonClass1:buttonClass,
                    buttonClass2:{current:index,selected:true,dispaly:'buttonShow'},
                    drawerOpen:true,
                })
            }else{
                this.setState({
                    drawerOpen:false,
                })
                this.onIcomClick()
            }
            break;
        }
    }
    // 去患者详情页
    gotopatientdetails(id){
        app.navigateTo('../patientdetails/patientdetails'+'?id='+id)
    }
    onIcomClick(){
        this.setState({
            buttonClass1:{current:3,selected:false,dispaly:'buttonNone'},
            buttonClass2:{current:3,selected:false,dispaly:'buttonNone'},
            patientInfo:[],
            province:'',
            city:'',
            label:'',
        },()=>{
            this.offset = 0
            this.total = 0
            this.getData()
        })
    }
    // 抽屉
    drawerClick(itemIndex){
        if(itemIndex >= 0){
            this.setState({
                label:this.state.labels[itemIndex].name
            })
        }
    }
    drawerClose(label){
        if(label == null || label == undefined || label ==''){
            this.setState({
                buttonClass1:{current:3,selected:false,dispaly:'buttonNone'},
                buttonClass2:{current:3,selected:false,dispaly:'buttonNone'},
                patientInfo:[],
                province:'',
                city:'',
                label:'',
                drawerOpen:false,
                pickerColock:false,
            },()=>{
                this.offset = 0
                this.total = 0
                this.getData()
            })
        }else{
            this.setState({
                patientInfo:[],
                province:'',
                city:'',
                label:label,
                drawerOpen:false,
                pickerColock:false,
            },()=>{
                this.offset = 0
                this.total = 0
                this.getData()
            })
        }
    }
    // 选择器
    regionChange(e){
        // console.log(e.detail)
        let region = e.detail.value
        if(region !== Number){
            this.setState({
                region:region
            },()=>{
                this.pickerCancel(region)
            })
        }else{
            this.setState({
                region:[]
            },()=>{
                this.pickerCancel(region)
            })
        }
    }   
    pickerCancel(region){
        if(region == null || region == undefined || region.length == 0 || region === Number){
            this.setState({
                buttonClass1:{current:3,selected:false,dispaly:'buttonNone'},
                buttonClass2:{current:3,selected:false,dispaly:'buttonNone'},
                patientInfo:[],
                province:'',
                city:'',
                label:'',
                region:[],
            },()=>{
                this.offset = 0
                this.total = 0
                this.getData()
            })
        }else{
            this.setState({
                province:region[0] || '',
                city:region[1] || '' ,
                patientInfo:[],
                value:'',
                label:'',
                pickerColock:true,
            },()=>{
                this.offset = 0
                this.total = 0
                this.getData()
            })
        }

    }



    offset = 0
    length = 20
    total = 0
    onReachBottom(){
        if(this.offset + this.length < this.total){
            this.offset = this.offset + this.length
            this.getData()
        }else{
            app.toast('没有更多数据咯')
        }
    }

    // 患者列表
    getData(){
        let me = this
        let data = {offset:this.offset,length:this.length,keyword:this.state.value,province:this.state.province,city:this.state.city,label:this.state.label}
        let dataArray = [],filterArray = [],filter = {}
        app.get('web/patient/many',data,(res)=>{
            dataArray = me.state.patientInfo.concat(res.data.result.list)
            dataArray.map(item=>{
                if (!filter[item.id]) {
                    filter[item.id] = 1
                    filterArray.push(item)
                }
            })
            me.total = filterArray.length
            me.setState({
                patientInfo:filterArray,
                patientCount:filterArray.length
            })
        })
    }
    // 总人数
    // getData2(){
    //     let me = this
    //     let data = {}
    //     app.get('web/statistics/patients',data,(res)=>{
    //         me.setState({
    //             patientCount:res.data.result.count
    //         })
    //     })
    // }
    // 标签
    getData3(){
        let me = this
        let data = {}
        app.get('web/patientlabel/many',data,(res)=>{
            me.setState({
                labels:res.data.result.list
            })
        })
    }
    componentDidMount(){
        this.getData()
        // this.getData2()
        this.getData3()
    }


    render () {
        // 患者数据
        let patientlists = this.state.patientInfo.map((item)=>{
            return <View className='patient' onClick={this.gotopatientdetails.bind(this,item.patient_id)}>
                        <Image 
                            className='head' 
                            src={item.head_image}
                        >
                        </Image>
                        <View className='info'>
                            <View className='top'>
                                {item.name}
                                <Text className='more-info'>{item.gender} {item.age}岁</Text>
                                <Text className='more-info'>添加于{item.add_time}</Text>
                            </View>
                            <View className='bottom'>
                            {item.labels.map((tagItem)=>{
                                return <AtTag className='tag'>{tagItem}</AtTag>
                            })}
                            </View>
                        </View>
                    </View>
        })
        // 地区赛选
        let AtIcon1 = this.state.buttonClass1.selected ? <AtIcon value='close-circle' size='15' onClick={this.onIcomClick}></AtIcon> : null
        let AtIcon2 = this.state.buttonClass2.selected ? <AtIcon value='close-circle' size='15' onClick={this.onIcomClick}></AtIcon> : null
        // 标签赛选
        let labelList = this.state.labels.map((item2)=>{
            return item2.name
        })
        

        return (
            <View className='patient-list'>
                <AtSearchBar
                    showActionButton
                    value={this.state.value}
                    onChange={this.onChange.bind(this)}
                    onClear={this.onClear.bind(this)}
                    onActionClick={this.onActionClick.bind(this,this.state.value)}
                    actionName='搜索'
                />
                <View className='patients-num'>全部患者（{this.state.patientCount}人）</View>
                <View className='segmentControl'>
                <Picker mode='region' onChange={this.regionChange.bind(this)} onCancel={this.pickerCancel.bind(this,0)} disabled={this.state.pickerColock}>    
                    <AtButton className={this.state.buttonClass1.dispaly} onClick={this.buttonClick.bind(this,0)}>
                        地区筛选  {AtIcon1}
                    </AtButton>
                </Picker>
                    <AtButton className={this.state.buttonClass2.dispaly} onClick={this.buttonClick.bind(this,1)}>
                        标签筛选  {AtIcon2}
                    </AtButton>
                </View> 
                <AtDrawer 
                    show={this.state.drawerOpen} 
                    right 
                    mask 
                    items={labelList}
                    onClose={this.drawerClose.bind(this,this.state.label)} 
                    onItemClick={this.drawerClick.bind(this)}
                />
                <View className='list'>
                    <View className='alphabet'>
                        <Text className='text'>#</Text>
                        <Text className='text'>A</Text>
                        <Text className='text'>B</Text>
                        <Text className='text'>C</Text>
                        <Text className='text'>D</Text>
                        <Text className='text'>E</Text>
                        <Text className='text'>F</Text>
                        <Text className='text'>G</Text>
                        <Text className='text'>H</Text>
                        <Text className='text'>I</Text>
                        <Text className='text'>J</Text>
                        <Text className='text'>K</Text>
                        <Text className='text'>L</Text>
                        <Text className='text'>M</Text>
                        <Text className='text'>N</Text>
                        <Text className='text'>O</Text>
                        <Text className='text'>P</Text>
                        <Text className='text'>Q</Text>
                        <Text className='text'>R</Text>
                        <Text className='text'>S</Text>
                        <Text className='text'>T</Text>
                        <Text className='text'>U</Text>
                        <Text className='text'>V</Text>
                        <Text className='text'>W</Text>
                        <Text className='text'>X</Text>
                        <Text className='text'>Y</Text>
                        <Text className='text'>Z</Text>
                    </View> 
                    {patientlists}
                </View>
            </View>
        );
    }
}
// reactMixin.onClass(SuifangHuanzheLieBiao,myJs);